<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .account {
            width: 600px;
            margin: 0 auto;
        }
    </style>

</head>
<body>
<div class="account">
    <h1 style="text-align: center">注册</h1>
    <form method="post" novalidate="novalidate">
        {% csrf_token %}
        {% for foo in form %}
            {% if foo.name == 'code' %}

                <div class="form-group">
                    <label for="{{ foo.id_for_label }}">{{ foo.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding: 0"> {{ foo }} </div>
                        <div class="col-md-6"><input id="b1" onclick="get_code_time()" class="btn btn-default" type="button"
                                                     value="点击获取验证码">
                        </div>
                    </div>
                    <div>
                        {{ foo.errors }}
                    </div>
                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ foo.id_for_label }}">{{ foo.label }}</label>
                    {{ foo }}
                </div>
                <div>
                    {{ foo.errors }}
                </div>
            {% endif %}


        {% endfor %}
        <button type="submit" class="btn btn-primary">注册</button>


    </form>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>
    var wait = 60;
    get_code_time = function (o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "点击获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = "(" + wait + ")秒后重新获取";
            wait--;
            setTimeout(function () {
                get_code_time(o)
            }, 1000)
        }
    };
    $('#b1').click(function () {
        var o = this;
        $.ajax({
            'url': '/app01/send/sms/?tpl=register',
            'type': 'post',
            'data': {
                'phone': $("[name='phone']").val(),
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },

            success: function (ret) {
                if (ret == '验证码发送成功'){
                       console.log(ret);
                        get_code_time(o);
                }

            }
        })


    });


</script>


</html>